import React from 'react';
import {
  Descriptions, Space, Input, Button,
} from 'antd';

const items = [
  {
    label: '产品名称',
    children: 'f-app-1025ad515-1223',
    span: {
      xl: 2,
      xxl: 2,
    },
  },
  {
    label: '描述',
    children: '多计算卡语音识别系统',
    span: {
      xl: 2,
      xxl: 2,
    },
  },
];

const items1 = [
  {
    label: '实例数',
    children: (
      <Space.Compact
        style={{
          width: '60%',
        }}
      >
        <Input defaultValue="62" />
        <Button type="primary">提交</Button>
      </Space.Compact>
    ),
    span: {
      xl: 1,
      xxl: 1,
    },
  },
];

function App() {
  return (
    <>
      <Descriptions
        title="基本信息"
        bordered
        column={{
          xs: 1,
          sm: 2,
          md: 3,
          lg: 3,
          xl: 2,
          xxl: 2,
        }}
        items={items}
      />
      <br />
      <Descriptions
        title="属性"
        bordered
        column={{
          xs: 1,
          sm: 2,
          md: 3,
          lg: 3,
          xl: 2,
          xxl: 2,
        }}
        items={items1}
      />
    </>

  );
}
export default App;
